<template>
  <view class="template-wave">
    <tn-nav-bar
      fixed
      :beforeBack="goBack"
      class="tn-color-white"
      :bottomShadow="false"
      backgroundColor="#362e7a"
      >风向标</tn-nav-bar
    >
    <view
      :style="{ padding: `${vuex_custom_bar_height + 'px'} 60rpx 0 60rpx` }"
    >
      <!-- <tantan :list="list" @onChange="change" ></tantan> -->
      <view class="swiper-box">
        <tn-swiper
          :current="current"
          :autoplay="false"
          :list="list"
          name="avatar"
          mode="dot"
          indicatorPosition="topCenter"
          imageMode="aspectFill"
          :height="1110"
          :radius="40"
          @change="change"
          @click="clickImage"
        ></tn-swiper>
        <view class="swiper-info" v-if="list[current]">
          <view class="swiper-info-text" @click="clickImage">
            <view class="tn-flex tn-flex-col-center">
                <span class="user-name">{{ list[current].nickname }}</span>
                <view v-if="list[current].vip">
                      <Grade :item="list[current]" name="lv"/>
                </view>
            </view>
            <view style="margin: 8rpx 0" v-if="list[current].shengri">
              <tn-tag v-for="(tag_item, tag_i) in Object.values(list[current].shengri)" :index="tag_i" class="tag" size="sm" shape="circle" width="auto" style="background: rgba(255, 255, 255, 0.3); color: #9d9ab3;margin-right: 16rpx;">
                <span style="color: rgba(255, 255, 255, 0.5);">{{ tag_item }}</span>
              </tn-tag>
            </view>
            <view style="color: #999999;font-size: 20rpx;height: 28rpx;">{{ list[current].dec }}</view>
          </view>
          <view class="swiper-info-btn">
            <tn-button @click="dislike" shape="icon" width="72rpx" height="72rpx" backgroundColor="rgba(216, 216, 216, 0.5)" style="margin-right: 48rpx;"><img src="../static/other/no.png" alt="" style="width: 60rpx; height: 60rpx"></tn-button>
            <tn-button @click="love" shape="icon" width="72rpx" height="72rpx" backgroundColor="rgba(216, 216, 216, 0.5)"><img src="../static/other/heart.png" alt="" style="width: 60rpx; height: 60rpx"></tn-button>
          </view>
        </view>
      </view>

      <tn-popup
        v-model="goumaishow"
        width="80%"
        height="400rpx"
        mode="bottom"
        backgroundColor="#ffffff"
        :borderRadius="30"
        :closeBtn="false"
        :maskCloseable="true"
      >
        <view class="  ">
          <view class="tn-margin-top tn-padding">
            <view class="tn-flex tn-flex-row-left">
              <view class="tn-padding-xs tn-text-bold tn-text-lg"
                >心动次数不足</view
              >
            </view>
            <view class="tn-flex-row-left">
              <view class="tn-padding-xs tn-color-gray">
                消耗{{ configInfo.heatmoney
                }}{{ configInfo.site_moneyname }}获得1次机会</view
              >
            </view>
            <view class="tn-flex-row-left">
              <view class="tn-padding-xs tn-color-gray">
                你要可以前往签到免费领取
                <tn-button
                  @click="
                    navigateToFn({
                      url: '/mineMixinPages/qiandao',
                      checkLogin: true,
                    })
                  "
                  size="sm"
                  backgroundColor="tn-cool-bg-color-6"
                  fontColor="#ffffff"
                  shape="round"
                  style="margin-left: 10px"
                >
                  去签到
                </tn-button></view
              >
            </view>
          </view>
          <view class="tn-text-center tn-padding-top">
            <view class="capsule" style="width: 90%; height: 80rpx">
              <tn-tag
                class="capsule-tag"
                width="70%"
                height="100%"
                :originLeft="true"
                padding="0"
                shape="circleLeft"
                backgroundColor="#5d5e7d"
                fontColor="#FFFFFF"
                :plain="false"
              >
                <image
                  :src="configInfo.site_moneylogo"
                  mode="heightFix"
                  style="height: 50rpx"
                ></image>
                <text class="tn-text-lg tn-text-bold"
                  >-{{ configInfo.heatmoney
                  }}{{ configInfo.site_moneyname }}</text
                >
              </tn-tag>
              <tn-tag
                @click="xindong(toid, 1)"
                class="capsule-tag"
                width="30%"
                height="100%"
                padding="0"
                shape="circleRight"
                backgroundColor="tn-cool-bg-color-6"
                fontColor="#ffffff"
                :plain="false"
              >
                <text class="tn-text-lg tn-text-bold">立即心动</text>
              </tn-tag>
            </view>
          </view>
        </view>
      </tn-popup>
    </view>
  </view>
</template>

<script>
import template_page_mixin from "@/libs/mixin/template_page_mixin.js";
import tantan from "@/friendMixinPages/dgex-tantan/dgex-tantan.vue";
import Grade from '@/components/grade/index.vue';
export default {
  mixins: [template_page_mixin],
  components: {
    tantan,
    Grade
  },
  data() {
    return {
      goumaishow: false,
      pipeishow: false,
      page: 1,
      current: 0,
      qiyushow: false,
      user_id: 0,
      list: [],
      userbody: { info: [] },
      toid: 0,
    };
  },
  onLoad(option) {
    this.info();
    this.user_id = uni.getStorageSync("user_id");
  },
  methods: {
    async info() {
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/chat/index/followList_fujin",
        data: {
          type: 2,
          sex: 0,
          page: that.page,
        },
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          if (that.page == 1) {
            that.list = result.data.data.data;
          } else {
            that.list = that.list.concat(result.data.data.data);
          }
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },
    change(i) {
      const data = this.list[i] || {}
      this.current = i
      // 判断倒数
      if (i > this.list.length - 1) {
        this.page++;
        this.info();
      }
      if (data?.type == "love") {
        this.toid = data.id;
        this.xindong(data.id, 2);
      }
    },

    async xindong(user_id, type) {
      let that = this;
      if (!this.isLogin) {
        this.loginBoxFlag = true;
        return false;
      }

      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/chat/love/loveheart",
        data: {
          type: type,
          user_id: user_id,
        },
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          uni.vibrateShort({
            success: function () {
              console.log("success");
            },
          });
          this.msg(result.data.msg);
          that.goumaishow = false;
          let message =
            '{"data":"我对你心动了！","sec":"0","type":"text","toid":"' +
            user_id +
            '","fromid":"' +
            this.user_id +
            '"}';
          if (this.configInfo.isheard_talk) {
            this.save_message(message);
          }
        } else {
          if (result.data.msg == "心动次数不足") {
            this.goumaishow = true;
            return;
          }
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      }
    },

    love() {
      if(this.list[this.current]?.type === 'love'){
        this.xindong(this.list[this.current].id, 2);
      }else{
        this.list[this.current].type = 'love'
        this.xindong(this.list[this.current].id, 1);
      }
      this.current += 1
    },
    dislike() {
      this.list[this.current].type = 'dislike'
      this.current += 1
    },

    clickImage() {
      this.navigateToFn({
        url: "/circleMixinPages/blogger_other?id=" + this.list[this.current].id,
        checkLogin: true,
      });
    },

    async save_message(datassd) {
      let that = this;
      this.$socket.send(datassd);
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/chat/chat/save_message",
        data: datassd,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.template-wave {
  position: relative;

  width: 100vw;
  height: 100vh;
  // margin: 0 64rpx;
}

/* 组件导航列表 start*/
.nav-list {
  display: flex;

  padding: 0rpx 12rpx 0rpx;
  justify-content: space-between;

  /* 列表元素 start */
  .nav-list-item {
    padding: 35rpx 30rpx 5rpx 30rpx;
    border-radius: 12rpx;
    width: 33%;
    margin: 0 18rpx 40rpx;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 99;

    /* 元素标题 start */
    .nav-link {
      font-size: 32rpx;
      text-transform: capitalize;
      padding: 0 0 10rpx 0;
      position: relative;

      .title {
        font-weight: bold;
        font-size: 36rpx;
        color: #ffffff;
        margin-top: 30rpx;
        text-align: center;
      }
      .author {
        font-size: 25rpx;
        color: #ffffff;
        margin-top: 50rpx;
        margin-left: -10rpx;
        text-align: center;
      }
    }
    /* 元素标题 end */

    /* 元素图标 start */
    .icon {
      font-variant: small-caps;
      position: absolute;
      top: 20rpx;
      right: 50rpx;
      left: 37%;
      width: 90rpx;
      height: 90rpx;
      line-height: 90rpx;
      margin: 0;
      padding: 0;
      display: inline-flex;
      text-align: center;
      justify-content: center;
      vertical-align: middle;
      font-size: 50rpx;
      color: #ffffff;
      white-space: nowrap;
      opacity: 0.9;

      background-size: cover;
      background-position: 50%;
      border-radius: 5000rpx;
    }
    /* 元素图标 end */
  }
  /* 列表元素 end */
}
/* 组件导航列表 end*/

/* 业务展示 start */
.tn-info {
  &__container {
    margin-top: 10rpx;
    margin-bottom: 50rpx;
  }

  &__item {
    width: 48%;
    margin: 15rpx 0rpx;
    padding: 40rpx 30rpx;
    border-radius: 15rpx;

    position: relative;
    z-index: 1;

    &::after {
      content: " ";
      position: absolute;
      z-index: -1;
      width: 100%;
      height: 100%;
      left: 0;
      bottom: 0;
      border-radius: inherit;
      opacity: 1;
      transform: scale(1, 1);
      background-size: 100% 100%;
    }

    &__left {
      &--icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        font-size: 40rpx;
        margin-right: 20rpx;
        position: relative;
        z-index: 1;

        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
        }
      }

      &__content {
        font-size: 30rpx;

        &--data {
          margin-top: 5rpx;
          font-weight: bold;
        }
      }
    }

    &__right {
      &--icon {
        position: absolute;
        right: 0rpx;
        top: 50rpx;
        font-size: 100rpx;
        width: 108rpx;
        height: 108rpx;
        text-align: center;
        line-height: 60rpx;
        opacity: 0.15;
      }
    }
  }
}

.swiper-box{
  position: relative;
  height: 1110rpx;
  .swiper-info{
    border-radius: 20rpx;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 304rpx;
    z-index: 3;
    background: linear-gradient(0deg, #000000 30%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 0 40rpx 40rpx 40rpx;
    .swiper-info-text{
      .user-name{
        font-size: 28rpx;
        color: #fff;
        font-weight: 500;
        margin-right: 20rpx;
      }
    }
    .swiper-info-btn{
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
/* 业务展示 end */
</style>
<style lang="scss">
::v-deep .tn-swiper {
    border-radius: 20rpx;
    overflow: hidden;

    .tn-swiper__item__image {
      border-radius: 20rpx;
    }
  }
  ::v-deep .tn-swiper__indicator__dot{
	  border-radius: 0px;
	  width: 18px;
	  height: 3px;
  }
</style>
